<template>
  <div class="match-item">
    <div class="time-league">
      <div class="select" @click="(index) => handleSelect(index)">
        <img src="@/assets/icons/score/select.webp" class="active" />
        <img src="@/assets/icons/score/selected.webp" class="default" />
      </div>
      <div class="league-container">
        <div class="time">{{ formatTime(match.matchTime) }}</div>
        <div class="league">{{ match.title }}</div>
      </div>
    </div>
    <div class="progress" :class="{ 'progress-red': match.status === 2 }">
      {{ match.match_status_txt }}
    </div>
    <div class="teams">
      <div class="team">
        <span class="team-name">{{ match.home_team_name }}</span>
        <span class="cards">
          <span class="yellow-card" v-show="match?.corner && match?.corner[2] > 0">{{
            match?.corner && match?.corner[2]
          }}</span>
          <span class="red-card" v-show="match?.corner && match?.corner[4] > 0">{{
            match?.corner && match?.corner[4]
          }}</span>
        </span>
      </div>
      <div class="team">
        <span class="team-name">{{ match.away_team_name }}</span>
        <span class="cards">
          <span class="yellow-card" v-show="match?.corner && match?.corner[3] > 0">{{
            match?.corner && match?.corner[3]
          }}</span>
          <span class="red-card" v-show="match?.corner && match?.corner[5] > 0">{{
            match?.corner && match?.corner[5]
          }}</span>
        </span>
      </div>
    </div>
    <div class="full-score item-full-score" :class="{ 'item-full-score-not': match.status !== 2 }">
      <div>{{ statusMatchScoreText(match.status, match?.home_grades) }}</div>
      <div>{{ statusMatchScoreText(match.status, match?.away_grades) }}</div>
    </div>
    <div class="half-score">
      <div>{{ statusMatchScoreText(match.status, match?.half_score[0]) }}</div>
      <div>{{ statusMatchScoreText(match.status, match?.half_score[1]) }}</div>
    </div>
    <div class="corner">
      <div>{{ statusMatchScoreText(match.status, match?.corner[0]) }}</div>
      <div>{{ statusMatchScoreText(match.status, match?.corner[1]) }}</div>
    </div>
    <div class="betting-info">
      <div class="index">
        <span v-for="(item, index) in match.w_1" :key="index">{{ item }}</span>
      </div>
      <div class="odds">
        <span
          :class="{ up: match.odds1_change === 'up', down: match.odds1_change === 'down' }"
          v-for="(item, index) in match.w_2"
          :key="index"
          >{{ item }}</span
        >
      </div>
    </div>
    <div class="icons">
      <img src="@/assets/icons/score/animation.webp" />
      <!-- <img src="@/assets/icons/score/video.webp" /> -->
    </div>
    <div class="favorite">
      <img src="@/assets/icons/score/collect.webp" alt="收藏" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, defineProps, toRef, watch } from 'vue'
import dayjs from 'dayjs'
const props = defineProps(['source'])
const match = toRef(props, 'source')
console.log(match, 'match')
const handleSelect = (index) => {
  console.log(index, 'index')
}
// watch(
//   () => myProps.list,
//   (newProps) => {
//     // console.log(newProps, 'newProps')
//     matches.value = newProps
//   }
// )
const formatTime = (num) => {
  return dayjs(num).format('HH:mm')
}
const status = (statusIndex) => {
  switch (statusIndex) {
    case 1:
      return ''
    case 2:
      return ''
    case 3:
      return ''
  }
}
const statusMatchScoreText = (statusIndex, score) => {
  // console.log(score, 'score')
  switch (statusIndex) {
    case 1:
      return '-'
    case 2:
      return score
    case 3:
      return score
  }
}
</script>
<style lang="scss" scoped>
.match-item {
  display: flex;
  align-items: center;
  //   padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  height: 46px;
  font-size: 12px;
  background: #fff;
  cursor: pointer;
  &:nth-child(2n) {
    background: #f6f8ff;
    // border-radius: 0px 0px 0px 0px;
  }
  &:hover {
    border: 1px solid rgba(22, 177, 58, 1);
  }
}

.time-league {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 50px;
    width: 4px;
    height: 32px;
    background: #e95d5d;
    border-radius: 2px 2px 2px 2px;
    top: 50%;
    margin-top: -16px;
  }
  .select {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -9px;
    cursor: pointer;
    img {
      width: 18px;
      height: 18px;
    }
    .default {
      display: none;
    }
    .active {
      display: inline;
    }
  }
}
.league-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
}
.time {
  color: #6c757d;
}

.league {
  color: #6c757d;
  width: 60px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.progress {
  flex: 0.5;
  color: #afb8cb;

  text-align: center;
}
.progress-red {
  color: #ff4343;
}

.teams {
  flex: 2;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  position: relative;
}

.team {
  display: flex;
  // justify-content: center;
  align-items: center;
  //   padding-right: 50px; /* 给 cards 留出空间 */
}

.team-name {
  flex: 1;
  text-align: left;
  padding-left: 25px;
  position: relative;
  .home_icon {
    position: absolute;
    left: 0px;
    padding: 0px 4px;
    color: #fff;
    background: #16b13a;
    border-radius: 20px;
    font-size: 10px;
    font-style: normal;
  }
  //   padding-left: 10px;
}

.cards {
  position: absolute;
  right: 10px;
  display: flex;
  gap: 5px;
}

.yellow-card {
  color: #fff;
  width: 15px;
  height: 15px;
  background: #ffbf60;
  border-radius: 2px 2px 2px 2px;
  text-align: center;
  line-height: 15px;
}

.red-card {
  color: #fff;
  background-color: #ff5d5d;
  width: 15px;
  height: 15px;
  // background: #ffbf60;
  border-radius: 2px 2px 2px 2px;
  text-align: center;
  line-height: 15px;
}

.full-score,
.half-score,
.corner {
  flex: 0.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.item-full-score {
  color: #ff4343;
  font-weight: bold;
  font-size: 14px;
}
.item-full-score-not {
  color: #20242d;
  font-weight: bold;
  font-size: 14px;
}
.betting-info {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.index,
.odds {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.index span,
.odds span {
  color: #6c757d;
}

.odds span.up {
  color: red;
}

.odds span.down {
  color: green;
}

.icons {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.icons img {
  width: 20px;
  height: 20px;
  margin: 0 2px;
  cursor: pointer;
}

.favorite {
  flex: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.favorite img {
  width: 20px;
  height: 20px;
}
</style>
